<template>
    <div>
        <h1>显示</h1>
        <a href="/loght">登录</a>
        <table class="table">
            <thead>
                <tr>
                    <td>账号</td>
                    <td>密码</td>
                    <td>手机号</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data.list">
                    <td>{{ a.name }}</td>
                    <td>{{ a.pwd }}</td>
                    <td>{{ a.tel }}</td>
                </tr>
            </tbody>

        </table>
        <span>共{{ data.totalcount }}条</span>
        <span>每页{{ info.pagesize }}条</span>
        <span>共 {{ info.pagecount }}/{{ data.totalpage }}条</span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pagecount - 1)">
        <span v-for="a in data.totalpage" @click="gopage(a)">{{ a }}</span>
        <input type="button" value="下一页" @click="gopage(info.pagecount + 1)">
        <input type="button" value="尾页" @click="gopage(data.totalpage)">
        <input type="number" v-model="info.pagecount">
        <input type="button" value="跳转" @click="gopage(info.pagecount)">
        <select v-model="info.pagesize" @change="show">
            <option v-for="a in arr" :value="a">{{ a }}</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useStore } from '@/stores/user'
import { useRouter } from 'vue-router'
const router = useRouter();
const abc = useStore();
let info: any = reactive({
    pagecount: 1,
    pagesize: 2,
})
let data: any = reactive({
    list: [],
    totalcount: 0,
    totalpage: 0,
})
let arr: any = ref([2, 4, 6, 8])
onMounted(() => {
    if (abc.userInfo.id) {

    }
    else {
        router.push('/loght')
    }
    getlist();
})
const getlist = () => {
    axios({
        url: '/api/User/Query',
        method: 'get',
        params: info
    })
        .then(res => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch(err => {
            console.log(err);

        })

}
const show = () => {
    info.pagecount = 1;
    getlist();
}
const gopage = (num: any) => {
    if (num < 1) {
        info.pagecount = 1;
        return;
    }
    if (num > data.totalpage) {
        info.pagecount = data.totalpage
        return;
    }
    info.pagecount = num;
    getlist();
}
</script>

<style scoped></style>